<script setup lang="ts">
const props = defineProps({
  title: {
    type: String,
    default: "",
  },
  content: {
    type: String,
    default: "",
  },
});

const emits = defineEmits(["edit"]),
  disabled = inject("limitDisabled", false);

const handleClick = () => {
  if (disabled) return;
  emits("edit");
};
</script>
<template>
  <div class="limits-item">
    <div class="limits-item_title">{{ title }}</div>
    <div
      class="limits-item_content"
      :style="{ cursor: disabled ? 'no-drop' : 'pointer' }"
      v-if="content"
      @click="handleClick"
    >
      {{ content }}
    </div>
  </div>
</template>
<style lang="scss" scoped>
.limits-item {
  background-color: #fafcff;
  border-radius: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  & + .limits-item {
    margin-top: 10px;
  }

  &_title {
    position: relative;
    padding-left: 12px;
    &::before {
      content: "";
      display: block;
      position: absolute;
      width: 4px;
      height: 16px;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      background-color: #3e61a9;
      border-radius: 2px;
    }
  }

  &_content {
    margin-left: 20px;
    background-color: #ffffff;
    border: 1px solid #a5bde2;
    border-radius: 4px;
    font-size: 14px;
    padding: 0 25px 0 10px;
    user-select: none;
    line-height: 32px;
    cursor: pointer;
    color: var(--el-color-primary);
  }
}
</style>
